
<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~   Copyright © 2013 VillageReach
  ~
  ~   This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~    
  ~   This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~   You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->
<style type="text/css">
    .ns-popover-tooltip-theme .ns-popover-tooltip{
        max-width: none !important;
    }
    .tab-pane .ns-popover-tooltip{
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    }
</style>
<script type="text/ng-template" id="amc">

    <div class="ns-popover-tooltip vaccine-report">
        <tabset class="table">
            <tab>
                <tab-heading style="cursor: pointer;"><span openlmis-message="title.overview"></span></tab-heading>
                <div class="triangle"></div>
                <div class="ns-popover-tooltip vaccine-report">
                    <a-float af-render="renderIt" af-option="amcChartOption" af-data="amcChart"
                             style="height: 200px; text-align:left; width: 500px; margin-bottom: 15px;"></a-float>
                </div>

            </tab>
            <tab>
                <tab-heading style="cursor: pointer;"><span openlmis-message="title.legend"></span></tab-heading>
                <div ta-bind ng-model="consumptionLegend.htmlContent" style="width: 500px;">

                </div>

            </tab>
        </tabset>
    </div>

</script>
<script type="text/ng-template" id="soh">
    <div class="ns-popover-tooltip vaccine-report">
        <tabset class="table">
            <tab>
                <tab-heading style="cursor: pointer;"><span openlmis-message="title.overview"></span></tab-heading>
                <div class="triangle"></div>
                <div class="ns-popover-tooltip vaccine-report">
                    <a-float af-render="renderIt" af-option="sohChartOption" af-data="sohChart"
                             style="height: 200px; text-align:left; width: 500px; margin-bottom: 15px;"></a-float>
                    <div class="clearfix"></div>
                </div>

            </tab>
            <tab>
                <tab-heading style="cursor: pointer;"><span openlmis-message="title.legend"></span></tab-heading>
                <div ta-bind ng-model="sohLegend.htmlContent" style="width: 500px;">
                </div>
            </tab>
        </tabset>
    </div>


</script>

<h2 style="padding: 10px;"><span style="margin-left: 15px;"
                                 openlmis-message="title.monthly.vaccination.report"></span><span> {{period != null ? (' : '+period.name+' , '+period.stringYear) : ''}}</span>
</h2>
<div id="vaccine-report" class="vaccine-report app-form">
        <form ng-submit="filterGrid()"  name="filterForm" novalidate>
            <div filter-container class="clearfix">
                <vaccine-period-tree-filter required="true"
                                            class="form-cell horizontalFilters"></vaccine-period-tree-filter>
                <zone-filter class="form-cell horizontalFilters" stand-alone="true"></zone-filter>
                <geo-facility-filter class="form-cell horizontalFilters"></geo-facility-filter>

            </div>
        </form>
    <div class="container-fluid">
        <div class="pull-right control-accordion">
            <a id="expandAll" href="javascript:void(0);" onclick="accordion.expandCollapse('expand')" openlmis-message="label.expand.all"></a> /
            <a id="collapseAll" href="javascript:void(0);" onclick="accordion.expandCollapse('collapse')" openlmis-message="label.collapse.all"></a>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="accordion">

                <div class="clearfix"></div>
                <div class="row-fluid">
                    <div class="span6">

                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="label.target.population"></a></span>
                            </div>
                            <div class="accordion-body" style="background-color: #ffffff">
                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="targetPopulation == undefined || targetPopulation.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="targetPopulation.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th style="text-align: center;" openlmis-message="label.demographics.targets"></th>
                                        <th style="text-align: center;" openlmis-message="label.monthly"></th>
                                        <th>Annual</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    <tr ng-repeat="tp in targetPopulation">
                                        <td>{{tp.category_name}}</td>
                                        <td class="number">{{tp.target_value_monthly | number}}</td>
                                        <td class="number">{{tp.target_value_annual | number}}</td>

                                    </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="label.disease.surveillance"> </a></span>
                            </div>
                            <div class="accordion-body" style="background-color: #ffffff">
                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="diseaseSurveillance == undefined || diseaseSurveillance.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="diseaseSurveillance.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th></th>
                                        <th openlmis-message="label.case.this.month" style="text-align: center;"></th>
                                        <th openlmis-message="label.cases.cumulative" style="text-align: center;"></th>
                                        <th openlmis-message="label.death.this.month" style="text-align: center;"></th>
                                        <th openlmis-message="label.death.cumulative" style="text-align: center;"></th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    <tr ng-repeat="ds in diseaseSurveillance">
                                        <td>{{ds.diseaseName}}</td>
                                        <td class="number">{{ds == null ? 'nul' : ds.cases | number}}</td>
                                        <td class="number">{{ds == null ? 'nul' :ds.cumulative | number}}</td>
                                        <td class="number">{{ds == null ? 'nul' :ds.death | number}}</td>
                                        <td class="number">{{ds == null ? 'nul' :ds.calculatedCumulativeDeaths | number}}</td>
                                    </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>

                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">

                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="label.vaccination"></a></span>
                            </div>
                            <div class="accordion-body" style="background-color: #ffffff">

                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="vaccineCoverage == undefined || vaccineCoverage.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="vaccineCoverage.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th rowspan="3" style="text-align: center; vertical-align: middle;"
                                            openlmis-message="label.antigens"></th>
                                        <th rowspan="3" style="text-align: center; vertical-align: middle" openlmis-message="label.doses"></th>
                                        <th colspan="9" style="text-align: center; vertical-align: middle" openlmis-message="label.monthly.vaccination"></th>
                                        <th colspan="5" style="text-align: center; vertical-align: middle" openlmis-message="label.cumulative.vaccination"></th>

                                    </tr>
                                    <tr>
                                        <th colspan="4" style="text-align: center; vertical-align: middle" openlmis-message="label.with.catchment"></th>
                                        <th colspan="3" style="text-align: center; vertical-align: middle" openlmis-message="label.outside.catchment"></th>
                                        <th colspan="2" style="text-align: center; vertical-align: middle" openlmis-message="label.total.vaccination.with.and.outside.catchment"></th>
                                        <th colspan="2" style="text-align: center; vertical-align: middle" openlmis-message="label.with.catchment"></th>
                                        <th  style="text-align: center; vertical-align: middle" openlmis-message="label.outside.catchment"></th>
                                        <th colspan="2" style="text-align: center; vertical-align: middle" openlmis-message="label.cumulative.total.vaccinations.with.and.outside.catchment"></th>
                                    </tr>
                                    <tr>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.male"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.female"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.total.vaccinated"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.coverage.percent"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.male"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.female"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.total"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.total"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.coverage.percent"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.total"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.coverage.percent"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.total"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.total"></th>
                                        <th style="text-align: center; vertical-align: middle" openlmis-message="label.coverage.percent"></th>
                                    </tr>

                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="vc in vaccineCoverage">
                                        <td style="text-align: center; vertical-align: middle;">{{vc.product_name}}</td>
                                        <td class="number">{{vc.display_name}}</td>
                                        <td class="number">{{vc.within_male | number}}</td>
                                        <td class="number">{{vc.within_female | number}}</td>
                                        <td class="number">{{vc.within_total | number}}</td>
                                        <td class="number">{{vc.within_coverage | number:0}}%</td>
                                        <td class="number">{{vc.outside_male | number}}</td>
                                        <td class="number">{{vc.outside_female | number}}</td>
                                        <td class="number">{{vc.outside_total | number}}</td>
                                        <td class="number">{{vc.within_outside_total | number}}</td>
                                        <td class="number">{{vc.within_outside_coverage | number:0}}%</td>
                                        <td class="number">{{vc.cum_within_total | number}}</td>
                                        <td class="number">{{vc.cum_within_coverage | number:0}}%</td>
                                        <td class="number">{{vc.cum_outside_total | number}}</td>
                                        <td class="number">{{vc.cum_within_outside_total | number}}</td>
                                        <td class="number">{{vc.cum_within_outside_coverage | number:0}}%</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.immunization.session"></a></span>
                            </div>
                            <div class="accordion-body" style="background-color: #ffffff">
                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="immunizationSession == undefined || immunizationSession.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="immunizationSession.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th openlmis-message="label.fixed.conducted" style="text-align: center;"></th>
                                        <th openlmis-message="label.outreach.conducted" style="text-align: center;"></th>
                                        <th openlmis-message="label.outreach.cancelled" style="text-align: center;"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="imz in immunizationSession">
                                        <td class="number">{{imz.fixedImmunizationSessions | number}}</td>
                                        <td class="number">{{imz.outreachImmunizationSessions | number}}</td>
                                        <td class="number">{{imz.outreachImmunizationSessionsCanceled | number}}</td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                    <div class="span6" ng-show="showOtherActivities">
                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.other.immunization.activities"></a></span>
                            </div>
                            <div class="accordion-body" >
                                <textarea rows="5" style="width: 100%"></textarea>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6">

                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.vitamin.A.supplementation"></a></span>
                            </div>
                            <div class="accordion-body" style="background-color: #ffffff">
                                <table client-side-sort-pagination class="table table-bordered"
                                                                                                  ng-show="vitaminSupplementation == undefined || vitaminSupplementation.length == 0">
                                <tr>
                                    <td openlmis-message="label.report.no.data.to.show"></td>
                                </tr>
                            </table>

                                <table ng-show="vitaminSupplementation.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th rowspan="2" colspan="2" openlmis-message="label.age.group"></th>
                                        <th colspan="3" openlmis-message="label.vitamin.supplementation"></th>
                                    </tr>
                                    <tr>
                                        <th openlmis-message="label.male" style="text-align: center;"></th>
                                        <th openlmis-message="label.female" style="text-align: center;"></th>
                                        <th openlmis-message="label.total.supplemented" style="text-align: center;"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="vs in vitaminSupplementation">
                                        <td style="vertical-align: middle; text-align: center">{{vs.vitaminName}}</td>
                                        <td>{{vs.ageGroup}}</td>
                                        <td class="number">{{vs.maleValue | number}}</td>
                                        <td class="number">{{vs.femaleValue | number}}</td>
                                        <td class="number">{{(vs.maleValue + vs.femaleValue) | number}}</td>
                                    </tr>

                                    </tbody>
                                </table>

                            </div>
                        </div>

                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">

                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.vaccines.vaccination.vita"></a></span>
                            </div>
                            <div class="accordion-body" style="background-color: #ffffff">
                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="vaccination == undefined || vaccination.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="vaccination.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th colspan="11" style="text-align: center; vertical-align: middle" openlmis-message="label.vaccine.stock.doses"></th>
                                    </tr>
                                    <tr>
                                        <th openlmis-message="label.type.of.antigen"></th>
                                        <th openlmis-message="label.opening.balance.doses" style="text-align: center;"></th>
                                        <th openlmis-message="label.doses.of.vaccine.received" style="text-align: center;"></th>
                                        <th openlmis-message="label.doses.of.vaccine.used.during.vaccination" style="text-align: center;"> </th>
                                        <th openlmis-message="label.doses.discarded.unopened" style="text-align: center;" ></th>
                                        <th openlmis-message="label.reasons.for.discarding.unopened.vial" style="text-align: center;"></th>
                                        <th openlmis-message="label.doses.of.vaccine.stock.on.hand" style="text-align: center;"></th>
                                        <th openlmis-message="label.no.of.days.stocked.out" style="text-align: center;"></th>
                                        <th openlmis-message="label.children.immunized" style="text-align: center;"></th>
                                        <th openlmis-message="label.usage.rate.formula" style="text-align: center;"></th>
                                        <th openlmis-message="label.wastage.rate.formula" style="text-align: center;"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="vc in vaccination">
                                        <td>{{vc.product_name}}</td>
                                        <td class="number">{{vc.opening_balance | number}}</td>
                                        <td class="number">{{vc.quantity_received | number}}</td>
                                        <td class="number" ng-class="colorify(vc.quantity_issued)">
                                            <a ng-mouseover="renderGraph(vc.facility_code, vc.product_code)" href="" ns-popover
                                               ns-popover-template="amc"
                                               ns-popover-trigger="mouseenter"
                                               ns-popover-timeout="0.2"
                                               ns-popover-placement="right|center"
                                               ns-popover-theme="ns-popover-tooltip-theme">{{vc.quantity_issued == null ? '-': (vc.quantity_issued | number)}}
                                            </a>
                                        </td>
                                        <td class="number">{{vc.quantity_discarded_unopened}}</td>
                                        <td>{{vc.reason_for_discarding}}</td>
                                        <td class="number" ng-class="colorify(vc.closing_balance)">
                                            <a ng-mouseover="renderGraph(vc.facility_code, vc.product_code)" href="" ns-popover
                                               ns-popover-template="soh"
                                               ns-popover-trigger="mouseenter"
                                               ns-popover-timeout="0.2"
                                               ns-popover-placement="right|center"
                                               ns-popover-theme="ns-popover-tooltip-theme"> {{vc.closing_balance == null ? '-' : (vc.closing_balance | number)}}
                                            </a>

                                        </td>

                                        <td class="number">{{vc.days_stocked_out | number}}</td>
                                        <td class="number">{{vc.children_immunized | number}}</td>
                                        <td class="number">{{vc.usage_rate | number:0}}%</td>
                                        <td class="number">{{vc.wastage_rate | number:0}}%</td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr><td colspan="11" openlmis-message="label.reasons.for.discarding.unopened.vials.options"></td></tr>
                                    </tfoot>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span6">

                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.syringes.and.safety.boxes"></a></span>
                            </div>
                            <div style="background-color: #ffffff" class="accordion-body prog-role-grid">
                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="syringes == undefined || syringes.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="syringes.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th colspan="7" style="text-align: center; vertical-align: middle" openlmis-message="label.safe.injection.equipment"></th>

                                    </tr>
                                    <tr>
                                        <th></th>
                                        <th openlmis-message="label.opening.balance" style="text-align: center;"></th>
                                        <th openlmis-message="label.received" style="text-align: center;"></th>
                                        <th openlmis-message="label.used" style="text-align: center;"></th>
                                        <th openlmis-message="label.wastage" style="text-align: center;"></th>
                                        <th openlmis-message="label.stock.on.hand" style="text-align: center;"></th>
                                        <th openlmis-message="label.no.of.days.stocked.out" style="text-align: center;"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="sy in syringes">
                                        <td>{{sy.product_name}}</td>
                                        <td class="number">{{sy.opening_balance | number}}</td>
                                        <td class="number">{{sy.quantity_received | number}}</td>
                                        <td class="number">{{sy.quantity_issued | number}}</td>
                                        <td class="number">{{ sy.quantity_wasted_other | number}}</td>
                                        <td class="number">{{sy.closing_balance | number}}</td>
                                        <td class="number">{{sy.days_stocked_out | number}}</td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                    <div class="span6">

                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.health.facility.vitamin.A.stock"></a></span>
                            </div>
                            <div style="background-color: #ffffff" class="accordion-body prog-role-grid">
                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="vitamins == undefined || vitamins.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="vitamins.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th colspan="6" style="text-align: center; vertical-align: middle" openlmis-message="label.vitamin.A.stock"></th>

                                    </tr>
                                    <tr>
                                        <th></th>
                                        <th openlmis-message="label.opening.balance" style="text-align: center;"></th>
                                        <th openlmis-message="label.vitamin.A.received" style="text-align: center;"></th>
                                        <th openlmis-message="label.total.vitamin.A.administered" style="text-align: center;"></th>
                                        <th openlmis-message="label.wastage" style="text-align: center;"></th>
                                        <th openlmis-message="label.stock.on.hand" style="text-align: center;"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="vit in vitamins">
                                        <td>{{vit.product_name}}</td>
                                        <td class="number">{{vit.opening_balance | number}}</td>
                                        <td class="number">{{vit.quantity_received | number}}</td>
                                        <td class="number">{{vit.quantity_issued | number}}</td>
                                        <td class="number">{{vit.quantity_wasted_other | number}}</td>
                                        <td class="number">{{vit.closing_balance | number}}</td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row-fluid">
                    <div class="span6">
                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.vaccines.discarded"></a></span>
                            </div>
                            <div class="accordion-body" style="background-color: #ffffff">
                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="vaccination == undefined || vaccination.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="vaccination.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th colspan="6" style="text-align: center; vertical-align: middle" openlmis-message="label.vaccine.stock.doses"></th>
                                    </tr>
                                    <tr>
                                        <th openlmis-message="label.type.of.antigen"></th>
                                        <th openlmis-message="label.discarded.expired" style="text-align: center;"></th>
                                        <th openlmis-message="label.discarded.broken" style="text-align: center;"></th>
                                        <th openlmis-message="label.discarded.cold.chain.failure" style="text-align: center;"> </th>
                                        <th openlmis-message="label.discarded.other" style="text-align: center;"></th>
                                        <th openlmis-message="label.discarded.total" style="text-align: center;"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="vd in vaccination">
                                        <td style="width:100px">{{vd.product_name}}</td>
                                        <td class="number">{{vd.expired | number}}</td>
                                        <td class="number">{{vd.broken | number}}</td>
                                        <td class="number">{{vd.cold_chain | number}}</td>
                                        <td class="number">{{vd.other | number}}</td>
                                        <td class="number">{{vd.quantity_discarded_unopened | number}}</td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.vaccine.dropout.rate"></a></span>
                            </div>
                            <div class="accordion-body" style="background-color: #ffffff">
                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="vaccination == undefined || vaccination.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="vaccination.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th colspan="6" style="text-align: center; vertical-align: middle" openlmis-message="label.vaccine.stock.doses"></th>
                                    </tr>
                                    <tr>
                                        <th openlmis-message="label.type.of.antigen"></th>
                                        <th openlmis-message="label.percent" style="text-align: center;"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="drop in dropOuts">
                                        <td>{{drop.indicator}}</td>
                                        <td class="number">{{drop.dropout | number}}</td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>


                <div class="row-fluid">
                    <div class="span6">

                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.refrigerator.temperature.monitoring"></a></span>
                            </div>
                            <div style="background-color: #ffffff" class="accordion-body prog-role-grid">
                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="coldChain == undefined || coldChain.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="coldChain.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th colspan="7" style="text-align: center; vertical-align: middle" openlmis-message="label.refrigerators.temperature.monitoring"></th>

                                    </tr>
                                    <tr>
                                        <th colspan="3" style="text-align: center; vertical-align: middle" openlmis-message="label.refrigerator.information"></th>
                                        <th colspan="2" style="text-align: center; vertical-align: middle" openlmis-message="label.temperature">x</th>
                                        <th colspan="2" style="text-align: center; vertical-align: middle" openlmis-message="label.no.of.alarm.episode"></th>
                                    </tr>
                                    <tr>
                                        <th openlmis-message="label.type"></th>
                                        <th openlmis-message="label.model"></th>
                                        <th openlmis-message="label.energy.source"></th>
                                        <th openlmis-message="label.min"></th>
                                        <th openlmis-message="label.max"></th>
                                        <th openlmis-message="label.low.temp"></th>
                                        <th openlmis-message="label.high.temp"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="cc in coldChain">
                                        <td>{{cc.equipmentName}}</td>
                                        <td>{{cc.model}}</td>
                                        <td>{{cc.energySource}}</td>
                                        <td>{{cc.minTemp}}</td>
                                        <td>{{cc.maxTemp}}</td>
                                        <td>{{cc.minEmpisodeTemp}}</td>
                                        <td>{{cc.maxEmpisodeTemp}}</td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="span6">

                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.aefi.reporting"></a></span>
                            </div>
                            <div style="background-color: #ffffff" class="accordion-body prog-role-grid">
                                <table client-side-sort-pagination class="table table-bordered"
                                       ng-show="adverseEffect == undefined || adverseEffect.length == 0">
                                    <tr>
                                        <td openlmis-message="label.report.no.data.to.show"></td>
                                    </tr>
                                </table>

                                <table ng-show="adverseEffect.length > 0" class="table-bordered table table-striped">
                                    <thead class="gradient-header">
                                    <tr>
                                        <th colspan="6" style="text-align: center; vertical-align: middle" openlmis-message="label.reported.adverse.events.following.immunization"></th>

                                    </tr>
                                    <tr>
                                        <th openlmis-message="label.vaccine"></th>
                                        <th openlmis-message="label.no.of.cases"></th>
                                        <th openlmis-message="label.batch.no"></th>
                                        <th openlmis-message="label.manufacturer"></th>
                                        <th openlmis-message="label.expired.date"></th>
                                        <th openlmis-message="label.investigated.yes.no"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="ae in adverseEffect">
                                        <td>{{ae.productName}}</td>
                                        <td>{{ae.cases}}</td>
                                        <td>{{ae.batch}}</td>
                                        <td>{{ae.manufacturer}}</td>
                                        <td>{{ae.expiry | date : 'MMM, yyyy'}}</td>
                                        <td>{{ae.isInvestigated}}</td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row-fluid">
                    <div class="span12">

                        <div class="accordion-section">
                            <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                                <span><b>+</b><a href="javascript:void(0);" openlmis-message="title.submission"></a></span>
                            </div>
                            <div  class="accordion-body prog-role-grid">
                                <form>
                                    <div class="form-cell horizontalFilters">
                                        <label class="labels" openlmis-message="label.date.prepared"></label>
                                        <div>
                                            <input id="preparedDate"/>
                                        </div>
                                    </div>
                                    <div class="form-cell horizontalFilters">
                                        <label class="labels" openlmis-message="label.date.submitted"></label>
                                        <div><input id="submittedDate"/></div>
                                    </div>
                                    <div class="form-cell horizontalFilters">
                                        <label class="labels" openlmis-message="label.name.and.signature"></label>
                                        <div><input id="signature"/></div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<script type="text/javascript">

      accordion.expandCollapse('expand');

</script>
